<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import moment from 'moment'

const props = defineProps<{ keywords: keywordsOf<Profile> }>()
let _keywords = { ...props.keywords }

const TODAY = moment()
const diplomas = ref(["大专", "大本"])
const tags = ref(["Vue.js", "Typescript"])

const availability = reactive({
    type: moment().isSame(_keywords.availability?.availableDate, 'day') ? 'TODAY' : 'APPOINTMENT',
});

const emit = defineEmits(['filterChange'])

const onAvailablityTypeChange = (): void => {
    if (availability.type == 'APPOINTMENT') {
        (_keywords.availability as Availability).availableDate = moment().add(1, 'month').format('YYYY-MM-DD');
    } else {
        (_keywords.availability as Availability).availableDate = TODAY.format('YYYY-MM-DD');
    }
}

const disabledDate = (day: string): boolean => {
    return moment(day).isBefore(TODAY, 'day');
}

const title = computed(() => {
    return `${moment(props.keywords.availability?.availableDate).format('YYYY年MM月DD日')}前可入场人员`
})

const filterDrawerVisible = ref(false as boolean)

const openFilter = () => {
    _keywords = { ...props.keywords }
    filterDrawerVisible.value = true

}
const update = () => {
    filterDrawerVisible.value = false
    emit('filterChange', _keywords)
}

</script>
<template>
    <!-- TODO:添加筛选条件 --学历 工作经验 技术要求 康露露  （待完善）9.8 -->
    <!-- TODO：筛选框的样式调整  王杰 9.9 -->

    <div class="top-header">
        {{ title }}
        <div class="right" @click="openFilter">
            <el-icon class="el-icon-s-operation"></el-icon>
        </div>
    </div>
    <div>
        <el-drawer direction="ttb" v-model="filterDrawerVisible" :with-header="false" size="100%">
            <div class="filter-drawer__content">
                <div class="hero">
                    <el-switch
                        style="display: block"
                        v-model="availability.type"
                        active-color="#13ce66"
                        inactive-color="orange"
                        active-text="预约"
                        inactive-text="立即"
                        active-value="APPOINTMENT"
                        inactive-value="TODAY"
                        @change="onAvailablityTypeChange"
                    ></el-switch>
                </div>
                <div>
                    <el-form>
                        <el-form-item
                            label="入场日期:"
                            v-if="_keywords.availability && availability.type == 'APPOINTMENT'"
                        >
                            <el-date-picker
                                v-model="_keywords.availability.availableDate"
                                type="date"
                                format="YYYY年MM月DD日"
                                value-format="YYYY-MM-DD"
                                placeholder="选择预计入场日期"
                                :disabledDate="disabledDate"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item label="工作经验:" v-if="_keywords.profession">
                            <el-slider
                                v-model="_keywords.profession.experience"
                                range
                                show-stops
                                :marks="{ 0: '0', 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8' }"
                                :max="8"
                            ></el-slider>
                        </el-form-item>

                        <el-form-item label="学&emsp;&emsp;历:" v-if="_keywords.education">
                            <el-checkbox-group v-model="_keywords.education.diploma">
                                <el-checkbox border :label="diploma" v-for="diploma in diplomas"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="技术标签:" v-if="_keywords.profession">
                            <el-checkbox-group v-model="_keywords.profession.tags">
                                <el-checkbox v-for="tag in tags" border :label="tag"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="filter-drawer__footer">
                <!-- <el-button type="text" @click="filterDrawerVisible = false">取消</el-button> -->
                <el-button plain type="text" @click="update">OK</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<style scoped>
.top-header {
    height: 80px;
    color: #3030b1;
    background-color: #bde0ff;
    border-bottom: solid 1px #5ea2f5;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 40px;
}

.top-header .right {
    color: #0c3898;
}
.el-icon-s-operation {
    font-size: 30px;
}

.hero {
    padding: 60px;
    text-align: center;
}
:deep(.filter-drawer__footer) {
    text-align: right;
    padding: 10px 40px;
}

:deep(.el-input) {
    width: 100%;
}
:deep(.el-checkbox) {
    margin-right: 0;
}
:deep(.el-checkbox.is-bordered) {
    padding: 0 10px;
}
:deep(.el-form-item) {
    border-top: solid 1px lightgray;
    padding: 10px 20px;
    display: block;
}
</style>